<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片懒加载</title>
</head>

<body>
    <div class="wrap">
        <ul class="img-list J_imgList"></ul>
    </div>
    <div id="J_data" style="display: none;">
        [{"img":"./img/1.jpg","name":"图片1"},
        {"img":"./img/2.jpg","name":"图片2"},
        {"img":"./img/3.jpg","name":"图片3"},
        {"img":"./img/4.jpg","name":"图片4"}]
    </div>
    <script type="text/html" id="J_imgTpl">
        <li id="img-item">
            <div class="img-wrap">
                <img src="./img/2.png" alt="{{name}}" data-src="{{img}}" class="list-img">
            </div>
            <div class="img-tt">
                <h1>{{name}}</h1>
            </div>
            
        </li>
    </script>
    <script src="./js/index.js"></script>
    <script>
        // 预加载
        var oDiv=document.getElementsByTagName('div')[0];
        var oimg=new Image();
        oimg.src='./img/1.png';
        // 图片加载完毕，在放入节点树中
        oimg.onload=function(){
            oDiv.appendChild(oimg)
        }
    </script>
</body>

</html>